import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Select, Input } from 'antd';

export default class addForm extends Component {
  formRef = React.createRef();

  componentDidMount() {
    this.props.getForm(this.formRef.current);
  }

  static propTypes = {
    categories: PropTypes.array,
    getForm: PropTypes.func.isRequired,
  };

  render() {
    const categories = this.props.categories ? this.props.categories : [];
    return (
      <div>
        <Form ref={this.formRef} name="add-form">
          <div>选择父类：</div>
          <Form.Item
            initialValue={0}
            rules={[
              { required: true, message: 'Please select category name!' },
            ]}
            name="selectedCategory"
          >
            <Select style={{ marginTop: '1.9%' }}>
              <Select.Option value={0}>一级分类</Select.Option>
              {categories.map((categoryItem) => {
                return (
                  <Select.Option value={categoryItem.id}>
                    {categoryItem.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
          <div>分类名称：</div>
          <Form.Item
            initialValue=""
            name="categoryName"
            rules={[{ required: true, message: 'Please input category name!' }]}
          >
            <Input placeholder="请输入分类名称" style={{ marginTop: '1.9%' }} />
          </Form.Item>
        </Form>
      </div>
    );
  }
}
